<template>
  <div style="height: 600px" :id="id">
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent
} from 'echarts/components';
import {
  GraphChart
} from 'echarts/charts';
import {
  CanvasRenderer
} from 'echarts/renderers';

echarts.use([TitleComponent, TooltipComponent, GraphChart, CanvasRenderer]);

import { pageRelation } from '@/api/fd/document';

export default {
  name: "relationView",
  props:{
    documentId: String,
    documentName: String
  },
  data(){
    return{
      id: "relationView",
      data: [],
      links: []
    }
  },
  watch:{
    documentId(val){
      if (val) {
        this.getData()
      }
    }
  },
  methods:{
    getData(){
      console.log(555)
      pageRelation({myDocumentId: this.documentId}).then(res => {
        this.data = res.data.data
        this.links = res.data.links
        this.initss()
      })
    },
    initss() {
      console.log(echarts, 'echarts')
      var option = {
        title: {text: this.documentName + '文档关系'},
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [{
          type: 'graph',
          layout: 'none',
          symbolSize: 50,
          roam: true,
          label: {show: true},
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {fontSize: 20},
          data: this.data,/* links: [],*/
          links: this.links,
          lineStyle: {opacity: 0.9, width: 2, curveness: 0}
        }]
      };
      var myChart = echarts.init(document.getElementById(this.id))
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
